<template>
  <div>
    <el-container>

      <el-aside>
        <div>
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
          </el-input>
          <el-tree
              @check-change="keyCheck"
              @node-click="nodeClick"
              :expand-on-click-node="false"
              class="filter-tree"
              :data="menuTree"
              show-checkbox
              default-expand-all
              node-key="id"
              :filter-node-method="filterNode"
              ref="menuTree"
              highlight-current
              :props="defaultProps">
          </el-tree>
        </div>
      </el-aside>
      <el-main>
        <el-form>
          <el-form-item>
            <el-button type="primary" :disabled="disableAdd" @click="handleAdd">新增</el-button>
            <el-button type="primary" :disabled="disableEdit" @click="handleEdit">修改</el-button>
            <el-button type="primary" :disabled="disableDel" @click="handleDelete">删除</el-button>
          </el-form-item>
          <el-form :model="editMenuForm" disabled v-show="currentMenuName!==''">
            <el-form-item label="菜单名称">
              <el-input v-model="editMenuForm.label" placeholder="菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="菜单类型">
              <el-select v-model="editMenuForm.type" disabled>
                <el-option label="目录" value="0"></el-option>
                <el-option label="菜单" value="1"></el-option>
                <el-option label="按钮" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="editMenuForm.type!=='2'" label="路由名称">
              <el-input v-model="editMenuForm.name" placeholder="路由名称"></el-input>
            </el-form-item>
            <el-form-item v-show="editMenuForm.type!=='2'" label="路由地址">
              <el-input v-model="editMenuForm.path" placeholder="路由地址"></el-input>
            </el-form-item>
            <el-form-item label="访问路径：（多个路径用;分隔）">
              <el-input v-model="editMenuForm.url" placeholder="访问路径"></el-input>
            </el-form-item>

          </el-form>
        </el-form>
      </el-main>

    </el-container>

    <div>

    </div>


    <!-- 修改菜单弹框 -->
    <el-dialog title="修改菜单" :visible.sync="menuFormVisible">
      <el-form :model="editMenuForm">
        <el-form-item label="菜单名称">
          <el-input v-model="editMenuForm.label" placeholder="菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-select v-model="editMenuForm.type" disabled>
            <el-option label="目录" value="0"></el-option>
            <el-option label="菜单" value="1"></el-option>
            <el-option label="按钮" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="editMenuForm.type!=='2'" label="路由名称">
          <el-input v-model="editMenuForm.name" placeholder="路由名称"></el-input>
        </el-form-item>
        <el-form-item v-show="editMenuForm.type!=='2'" label="路由地址">
          <el-input v-model="editMenuForm.path" placeholder="路由地址"></el-input>
        </el-form-item>
        <el-form-item label="访问路径：（多个路径用;分隔）">
          <el-input v-model="editMenuForm.url" placeholder="访问路径"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="menuFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMenu('update')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加菜单弹框 -->
    <el-dialog :title="currentMenuName==''?'添加目录':'添加菜单'" :visible.sync="addMenuFormVisible">
      <el-form :model="addMenuForm">
        <el-form-item v-show="currentMenuName!==''" label="上级菜单">
          <el-tag type="success">{{ currentMenuName }}</el-tag>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="addMenuForm.label" placeholder="菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-select v-model="addMenuForm.type" :disabled="currentMenuName==''">
            <el-option v-show="currentMenuName==''" label="目录" value="0"></el-option>
            <el-option label="菜单" value="1"></el-option>
            <el-option label="按钮" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="addMenuForm.type=='1'" label="路由名称">
          <el-input v-model="addMenuForm.name" placeholder="路由名称"></el-input>
        </el-form-item>
        <el-form-item v-show="addMenuForm.type=='1'" label="路由地址">
          <el-input v-model="addMenuForm.path" placeholder="路由地址"></el-input>
        </el-form-item>
        <el-form-item label="访问路径">
          <el-input v-model="addMenuForm.url" placeholder="访问路径"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addMenuFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMenu('add')">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import Menu from "../api/menu";


export default {
  data() {
    return {
      formInline: {},
      total: 0,
      size: 3,
      current: 1,
      deptList: [],
      tableData: [],
      queryForm: {},
      createTimeArray: ['', ''],
      multipleSelection: [],
      menuFormVisible: false,
      addMenuFormVisible: false,
      editMenuForm: {},
      addMenuForm: {},
      imageUrl: '',
      checkedRole: [],
      roleList: [],
      currentMenuName: '',
      currentMenuId: '',
      menuTree: [],
      defaultProps: {
        children: 'childrenMenu',
        label: 'label'
      },
      filterText: '',
      disableDel: true,
      disableEdit: true,
      disableAdd: false,
      currentNode: {},
    }
  },
  created() {
    this.getMenuList();
  },
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val);
    }
  },
  methods: {
    nodeClick(node) {
      console.log(node)
      this.currentNode = {...node}
      this.editMenuForm = {...node}
      this.editMenuForm.type = this.editMenuForm.type + ''
      this.currentMenuName = this.currentNode.label
      this.currentMenuId = this.currentNode.id

      this.disableEdit = this.$refs.menuTree.getCheckedKeys() > 0
      let type = node.type;
      if (type == 2) { //如果是按钮 不让添加
        this.disableAdd = true;
      } else {
        this.disableAdd = false;
      }

    },
    keyCheck() {
      console.log('keyCheck')
      this.disableDel = this.$refs.menuTree.getCheckedKeys() == 0
      this.disableEdit = this.$refs.menuTree.getCheckedKeys() > 0
    },
    getCheckedNodes() {
      console.log(this.$refs.menuTree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.menuTree.getCheckedKeys());
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    async getMenuList() {
      let response = await Menu.getMenuList();
      this.menuTree = response.data
    },
    changePage(page) {
      console.log('page==', page)
      this.current = page
      this.getMenuList();
    },
    //批量删除
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection, 'this is selected')
    },
    // 删除
    async handleDelete() {
      console.log(this.$refs.menuTree.getCheckedKeys());
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await Menu.deleteMenu(this.$refs.menuTree.getCheckedKeys());
        this.getMenuList();
      }).catch(() =>{

      })

    },
    // 点击添加
    handleAdd() {
      this.addMenuFormVisible = true;
      this.addMenuForm = {}
      if (this.currentMenuName == '') {
        this.addMenuForm.type = '0'

      }

    },    // 点击编辑
    handleEdit() {
      this.menuFormVisible = true;
      // this.editUserForm = JSON.parse(JSON.stringify(this.row))  把复杂类型先转成字符串 字符串复制没有引用问题 然后再转过来
      // this.editMenuForm = {...row}; //es6解构赋值写法（把复杂类型的对象里的属性是简单类型的 一个个复制属性过去）如果对象里只有简单类型 没有复杂类型用解构赋值即可
      this.editMenuForm.oper = 'update'
    },

    async saveMenu(oper) {
      if (oper == "update") {
        await Menu.updateMenu(this.editMenuForm);
      }
      if (oper == "add") {
        // 设置父节点id
        if (this.currentMenuId){
          this.addMenuForm.parentId = this.currentMenuId
        }else {
          this.addMenuForm.parentId = 0
        }
        await Menu.addMenu(this.addMenuForm);
      }
      this.menuFormVisible = false
      this.addMenuFormVisible = false
      this.editMenuForm = {}
      this.addMenuForm = {}
      this.getMenuList();
    },
  }
}
</script>

<style scoped>

</style>